/**
 * 项目基础入口
 * @date    2019-12-12 11:32:41
 * @Author  likai
 * @email   
 */
import React,{useState,createElement,lazy,Suspense,} from 'react'
import {useLocation,useHistory,Switch,Route} from 'react-router-dom'
import { Layout, Menu,Dropdown,Breadcrumb } from 'antd'
import Router,{RouteList} from '@/pages/main/routes'
import * as serviceWorker from '@/serviceWorker'
import Routes from '@/pages/main/routes'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  DownOutlined
} from '@ant-design/icons'
import {getUserInfo} from '@utils/store'
import utils from '@utils'
import Password from './password'
import css from './index.scss'
import "@css/index.css"
import "antd/dist/antd.css"

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout

const App = props=>{
  let userInfo = getUserInfo()
  let history = useHistory()
  let location = useLocation()
  // 合并所有的子节点到一个数组中
  let children = Routes.reduce((arr,item)=>{
    arr.push(...item.children)
    return arr
  },[])

  let menuItems=[]
   Routes.find(item=>{
    let dataItem={'label':item.name,'key':item.key,children:[]}
  
    item.children.find(child=>{
      if(child.isHide) return null
      let childDataItem={'label':child.name,'key':child.subKey}
      dataItem.children.push(childDataItem)
    })
    menuItems.push(dataItem)
  })

  let [user,setUser] = useState(null)
  let [selectItem] = useState(()=>{
    let item =children.find(item=>item.path===location.pathname)
    return item
  })
  let [collapsed,setCollapse] = useState(false)
  const toggle = () => {
    setCollapse(!collapsed)
  }
  const onLogout = ()=>{
    utils.post('/api/logout')
      .then(res=>{
        if(res.errorCode===0){
          utils.store.removeAllData()
          window.location.href="/login/main"
        }
      })
  }
  // useEffect(()=>{
  //   if(!currentData.id){
  //     onLogout()
  //   }
  // },[])
	return <Layout>
    {
      user?createElement(Password,{
        params:user,
        onOk:()=>{
          setUser(null)
        },
        onCancel:_=>{
          setUser(null)
        },
      }):null
    }
    <Sider className={css.container} collapsed={collapsed}>
      <div className={css.logo} >财务管理平台</div>
      <Menu 
        defaultSelectedKeys={[selectItem.subKey]}
        defaultOpenKeys={[selectItem.key]}
        theme="dark" 
        mode="inline" 
        onSelect={(item,key,keyPath)=>{
          let child =children.find(child=>item.key==child.subKey)
          if(child){
            history.push(child.path,child.subKey)
          }
        }}
        items={menuItems}
        >
        {/* {
        	Routes.map((item,index)=>{
        		let {children=[],name} = item
        		return <SubMenu key={item.key} title={<span>{name}</span>}>
        			{
        				children.map((child,j)=>{
                  if(child.isHide) return null
        					return <Menu.Item key={child.subKey}>{child.name}</Menu.Item>
        				})
        			}
        		</SubMenu>
        	})
        } */}
      </Menu>
    </Sider>
    <Layout className="site-layout" style={{ marginLeft: collapsed?80:200,backgroundColor:'#fff' }}>
      <Header className={css.headerLayoutBackground+' display-between'} style={{ padding: 0 }}>
        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
          className: css.trigger,
          onClick: toggle,
        })}
        
        <Dropdown overlay={
          <Menu>
            <Menu.Item>
              <div onClick={onLogout} >
                退出登录
              </div>
            </Menu.Item>
            <Menu.Item>
              <div onClick={()=>{
                setUser(true)
              }} >
                修改密码
              </div>
            </Menu.Item>
          </Menu>}>
          <span className={css.dropdownLink} onClick={e => e.preventDefault()}>
            {userInfo.loginName} <DownOutlined />
          </span>
        </Dropdown>

      </Header>
      <div className={css.breadcrumb}>

        <Breadcrumb>
          {
            selectItem.breadcrumb && selectItem.breadcrumb.map((item,index)=><Breadcrumb.Item key={index}>{item}</Breadcrumb.Item>)
          }
        </Breadcrumb>
      </div>
      <Content className={css.siteLayoutBg}>
        {
          <Suspense fallback={<div></div>}> 
            <Switch>
              {
                RouteList.map((item,index)=>{
                  const Com = lazy(item.component)
                  return <Route key={index}  path={item.path} render={(props)=>{
                    return <Com {...props} />
                  }} />
                })
              }
            </Switch>
          </Suspense>
        }
      </Content>
    </Layout>
  </Layout>
}


// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

export default App
